<template>
    <view class="page">
        <view class="search-box">
            <input v-model.trim="keyword" class="search-input" placeholder="请输入关键字" @focus="showHistory = true"
                @blur="onBlur" />
            <button class="search-button" @click="handleSearch">搜索</button>
        </view>

        <view v-if="list.length" class="list">
            <view class="item" v-for="item in list" :key="item.id" @click="goInfo(item)">
                <view class="item-type">{{ item.type === "buy" ? "买" : "卖" }}</view>
                <view class="item-message">{{ item.message }}</view>
            </view>
        </view>

        <view v-else class="empty">
            <text>暂无数据</text>
        </view>

        <!-- 
        v-show 的问题，uniapp 环境下有不兼容

        当前元素设置了 display: flex ，然后css权重比默认的大，所以样式被覆盖掉了

        解决方案：将默认的权重提高
            view[hidden] {
            display: none !important;
            }
        -->
            <!-- 
        搜索历史的数据一般都是存储在本地的。uni.setStorage  uni.getStorage
        -->
        <view v-show="showHistory" class="search-history">
            <view class="search-history__title">搜索历史</view>
            <view class="search-history__list">
                <view class="search-history__item" v-for="(item, index) in history" :key="index" @click="quickSearch(item)">
                    {{ item }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const list = ref<any[]>([]); // 搜索结果集合
const keyword = ref(""); // 搜索关键字
const showHistory = ref(false); // 搜素历史面板显示与否
// history的默认值，是取得本地存储，如果获取不到，就设置一个空数组
const history = ref<string[]>(uni.getStorageSync("history") || []); // 搜索记录

const getList = (keyword: string) => {
    uni.request({
        url: "http://localhost:3000/trades",
        method: "GET",
        data: {
            q: keyword,
        },
        success: ({ data }) => {
            console.log("===", data);
            // 将 data 赋值给 list
            list.value = data as any[];
        },
    });
};

const goInfo = (data: any) => {
    uni.navigateTo({
        url: `/pages/info/info?id=${data.id}`,
    });
};

// 处理搜索点击
const handleSearch = () => {
    // 将关键字写入 history
    if (keyword.value.trim()) {
        // 两个问题
        //    1. 最新的放前面，使用 unshift
        //    2. 长度的限制，最大限制 3个 。如何做？
        history.value.unshift(keyword.value);
        history.value = history.value.splice(0, 3);
        // 还需要做一下本地存储
        uni.setStorageSync("history", history.value);
    }

    // 调用接口搜索
    getList(keyword.value);
};

// 处理失去焦点事件
const onBlur = () => {
    setTimeout(() => {
        showHistory.value = false;
    }, 100);
};

// 搜索历史点击，实现快速搜索功能
const quickSearch = (str: string) => {
    console.log("quickSearch", str);
    // 将 str 赋值给 keyword
    keyword.value = str;

    // 调用接口搜索
    getList(keyword.value);
};

onLoad(() => {
    // 默认调用一次接口
    getList("");
});
</script>

<style scoped>
.search-box {
    display: flex;
    align-items: center;
    padding: 20rpx;
    height: 100rpx;
    background-color: #ccc;
}

.search-input {
    flex: 1;
    padding: 0 20rpx;
    height: 80rpx;
    border: 1px solid #000;
    border-radius: 10rpx;
    background-color: #fff;
}

.search-button {
    margin-left: 20rpx;
}

.item {
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #000;
}

.search-history {
    position: fixed;
    top: 140rpx;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 500rpx;
    overflow-y: hidden;
    border: 1px solid #000;
    border-bottom-left-radius: 80rpx;
    border-bottom-right-radius: 80rpx;
    background-color: #fff;
}

.search-history__title {
    padding-left: 20rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 36rpx;
}

.search-history__list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
}

.search-history__item {
    border: 1px solid #000;
    margin: 20rpx;
    padding: 0 20rpx;
    height: 72rpx;
    line-height: 72rpx;
}
</style>
